<template>
  <div class="edit-airline-panel" :class="{ collapsed: isCollapsed }">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">编辑航线</h3>
      <!-- 功能按钮组 -->
      <div class="function-btn-group">
        <!-- 保存 -->
        <div class="function-btn-item">
          <img class="function-btn-icon save" :src="saveIcon" alt="保存">
          <div class="function-btn-item-text">保存</div>
        </div>
        <!-- 返回 -->
        <div class="function-btn-item">
          <img class="function-btn-icon" :src="goBackIcon" alt="返回">
          <div class="function-btn-item-text">返回</div>
        </div>
      </div>
    </div>
    
    <!-- 内容 -->
    <div class="panel-content">
      <!-- 航线基本信息 -->
      <div class="bg-card">
        <div class="airline-base-info-container">
          <div class="base-info-item">
            <div class="base-info-item-label">航线长度</div>
            <div class="base-info-item-content">3345.7<span class="unit">m</span></div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-label">预计执行时间</div>
            <div class="base-info-item-content">06:44</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-label">航点</div>
            <div class="base-info-item-content">13</div>
          </div>
          <div class="base-info-item">
            <div class="base-info-item-label">照片</div>
            <div class="base-info-item-content">0</div>
          </div>
        </div>
      </div>
      <!-- 航线类型 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label">航线类型</div>
          <div class="card-content">
            <div class="airline-type-container">
              <div 
                class="airline-type-item"
                :class="{ active: selectedAirlineType === 'waypoint' }"
                @click="selectAirlineType('waypoint')"
              >
                <img class="airline-type-item-icon" :src="waypointRouteIcon" alt="航点航线" />
                <div class="airline-type-item-text">航点航线</div>
              </div>
              <div 
                class="airline-type-item"
                :class="{ active: selectedAirlineType === 'area' }"
                @click="selectAirlineType('area')"
              >
                <img class="airline-type-item-icon" :src="areaRouteIcon" alt="面状航线" />
                <div class="airline-type-item-text">面状航线</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 航线名称、设备选择 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label">航线名称</div>
          <div class="card-content">
            <div class="airline-name-content-wrapper">
              <el-input 
                v-model="airlineName"
                placeholder="请输入航线名称"
                clearable
              />
            </div>
          </div>
        </div>
        <div class="card-row">
          <div class="card-label">设备选择</div>
          <div class="card-content">
            <div class="select-device-content-wrapper">
              <el-select 
                v-model="selectedDevice"
                placeholder="请选择设备"
              >
                <el-option
                  v-for="item in deviceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <el-select 
                v-model="selectedDeviceSerial"
                placeholder="请选择序列号"
              >
                <el-option
                  v-for="item in deviceSerialOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
      </div>
      <!-- 拍照设置 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label">拍照设置</div>
          <div class="card-content">
            <div class="photo-settings-container">
              <div 
                class="photo-settings-item"
                :class="{ active: selectedPhotoSetting === 'wideAngle' }"
                @click="selectPhotoSetting('wideAngle')"
              >
                <img class="photo-settings-item-icon" :src="wideAngleIcon" alt="广角" />
                <div class="photo-settings-item-text">广角</div>
              </div>
              <div 
                class="photo-settings-item"
                :class="{ active: selectedPhotoSetting === 'zoom' }"
                @click="selectPhotoSetting('zoom')"
              >
                <img class="photo-settings-item-icon" :src="zoomIcon" alt="变焦" />
                <div class="photo-settings-item-text">变焦</div>
              </div>
              <div 
                class="photo-settings-item"
                :class="{ active: selectedPhotoSetting === 'infrared' }"
                @click="selectPhotoSetting('infrared')"
              >
                <img class="photo-settings-item-icon" :src="infraredIcon" alt="红外" />
                <div class="photo-settings-item-text">红外</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设置起飞点 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label">设置起飞点<img class="question-icon" :src="questionIcon" /></div>
          <div class="card-content">
            <div class="set-takeoff-point-container">
              <!-- 按钮 -->
              <div class="set-takeoff-point-item">
                <img class="set-takeoff-point-item-icon" :src="setTakeoffPointIcon" alt="设置起飞点" />
                <div class="set-takeoff-point-item-text">点击设置起飞点</div>
              </div> 
              <!-- 经纬度信息 -->
              <div class="lon-and-lat-info">
                <div class="info-item">经度：117.317642</div>
                <div class="info-item">纬度：29.155444</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 起飞爬升模式 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label move-up-label">起飞爬升模式<img class="question-icon" :src="questionIcon" /></div>
          <div class="card-content">
            <div class="takeoff-climb-mode-container">
              <div 
                class="takeoff-climb-mode-item"
                :class="{ active: selectedClimbMode === 'vertical' }"
                @click="selectClimbMode('vertical')"
              >
                <img class="takeoff-climb-mode-item-icon" :src="verticalClimbIcon" alt="垂直爬升" />
                <div class="takeoff-climb-mode-item-text">垂直爬升</div>
              </div>
              <div 
                class="takeoff-climb-mode-item"
                :class="{ active: selectedClimbMode === 'tilt' }"
                @click="selectClimbMode('tilt')"
              >
                <img class="takeoff-climb-mode-item-icon" :src="tiltClimbIcon" alt="倾斜爬升" />
                <div class="takeoff-climb-mode-item-text">倾斜爬升</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 距离设置 -->
        <div class="takeoff-climb-mode-setting-container">
          <!-- 左侧图片 -->
          <div class="img-wrapper">
            <img class="img-item" :src="takeoffClimbModeImg" alt="爬升示例" />
          </div>
          <!-- 右侧内容 -->
          <div class="content-wrapper">
            <!-- +100 按钮 -->
            <div class="altitude-control-item clickable" @click="adjustAltitude(100)">
              <div class="control-value">+100</div>
              <div class="control-unit">m</div>
            </div>
            <!-- +10 按钮 -->
            <div class="altitude-control-item clickable" @click="adjustAltitude(10)">
              <div class="control-value">+10</div>
              <div class="control-unit">m</div>
            </div>
            <!-- 当前高度输入框 -->
            <div class="altitude-input-wrapper">
              <el-input
                v-model.number="currentAltitude"
                type="number"
              >
                <template #append>m</template>
              </el-input>
            </div>
            <!-- -10 按钮 -->
            <div class="altitude-control-item clickable" @click="adjustAltitude(-10)">
              <div class="control-value">-10</div>
              <div class="control-unit">m</div>
            </div>
            <!-- -100 按钮 -->
            <div class="altitude-control-item clickable" @click="adjustAltitude(-100)">
              <div class="control-value">-100</div>
              <div class="control-unit">m</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 航线高度模式 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label move-up-label">航线高度模式<img class="question-icon" :src="questionIcon" /></div>
          <div class="card-content">
            <div class="airline-altitude-mode-container">
              <div 
                class="airline-altitude-mode-item"
                :class="{ active: selectedAltitudeMode === 'absolute' }"
                @click="selectAltitudeMode('absolute')"
              >
                <img class="airline-altitude-mode-item-icon" :src="absoluteAltitudeIcon" alt="绝对高度" />
                <div class="airline-altitude-mode-item-text">绝对高度</div>
              </div>
              <div 
                class="airline-altitude-mode-item relative"
                :class="{ active: selectedAltitudeMode === 'relative' }"
                @click="selectAltitudeMode('relative')"
              >
                <img class="airline-altitude-mode-item-icon" :src="relativeTakeoffAltitudeIcon" alt="相对起飞点高度" />
                <div class="airline-altitude-mode-item-text">相对起飞点高度</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 高度设置 -->
        <div class="airline-altitude-mode-setting-container">
          <!-- 左侧图片 -->
          <div class="img-wrapper">
            <img class="img-item" :src="airlineAltitudeModeImg" alt="航线高度示例" />
          </div>
          <!-- 右侧内容 -->
          <div class="content-wrapper">
            <!-- +100 按钮 -->
            <div class="airline-altitude-control-item clickable" @click="adjustAirlineAltitude(100)">
              <div class="control-value">+100</div>
              <div class="control-unit">m</div>
            </div>
            <!-- +10 按钮 -->
            <div class="airline-altitude-control-item clickable" @click="adjustAirlineAltitude(10)">
              <div class="control-value">+10</div>
              <div class="control-unit">m</div>
            </div>
            <!-- 当前高度输入框 -->
            <div class="airline-altitude-input-wrapper">
              <el-input
                v-model.number="airlineAltitude"
                type="number"
              >
                <template #append>m</template>
              </el-input>
            </div>
            <!-- -10 按钮 -->
            <div class="airline-altitude-control-item clickable" @click="adjustAirlineAltitude(-10)">
              <div class="control-value">-10</div>
              <div class="control-unit">m</div>
            </div>
            <!-- -100 按钮 -->
            <div class="airline-altitude-control-item clickable" @click="adjustAirlineAltitude(-100)">
              <div class="control-value">-100</div>
              <div class="control-unit">m</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 全局航线速度 -->
      <div class="bg-card normal-card">
        <div class="card-row">
          <div class="card-label">全局航线速度<img class="question-icon" :src="questionIcon" /></div>
          <div class="card-content">
            <div class="global-speed-content-container">
              <div class="global-speed-input-wrapper">
                <el-input
                  v-model.number="globalAirlineSpeed"
                  type="number"
                >
                  <template #append>m/s</template>
                </el-input>
              </div>
            </div>
          </div>
        </div>
        <!-- 航线速度设置 -->
        <div class="airline-speed-setting-container">
          <CommonSlider
            v-model="globalAirlineSpeed"
            :min="0"
            :max="20"
            :step="1"
          />
        </div>
      </div>
      <!-- 高级设置 -->
      <div class="bg-card normal-card">
        <div class="advanced-setting-container">      
          <div class="card-row">
            <div class="card-label">高级设置</div>
          </div>
          <div class="card-row">
            <div class="card-label">航点类型</div>
            <div class="card-content">
              <div class="advanced-setting-content-wrapper">
                <div class="advanced-setting-select-wrapper">
                  <el-select
                    v-model="waypointType"
                    placeholder="请选择航点类型"
                  >
                    <el-option
                      v-for="item in waypointTypeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <div class="card-row">
            <div class="card-label">飞行器偏航角模式<img class="question-icon" :src="questionIcon" /></div>
            <div class="card-content">
              <div class="advanced-setting-content-wrapper">
                <div class="advanced-setting-select-wrapper">
                  <el-select
                    v-model="yawMode"
                    placeholder="请选择偏航角模式"
                  >
                    <el-option
                      v-for="item in yawModeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <div class="card-row">
            <div class="card-label">航点间云台俯仰角控制模式<img class="question-icon" :src="questionIcon" /></div>
            <div class="card-content">
              <div class="advanced-setting-content-wrapper">
                <div class="advanced-setting-select-wrapper">
                  <el-select
                    v-model="gimbalPitchMode"
                    placeholder="请选择云台俯仰角模式"
                  >
                    <el-option
                      v-for="item in gimbalPitchModeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
          <div class="card-row">
            <div class="card-label">完成动作<img class="question-icon" :src="questionIcon" /></div>
            <div class="card-content">
              <div class="advanced-setting-content-wrapper">
                <div class="advanced-setting-select-wrapper">
                  <el-select
                    v-model="finishAction"
                    placeholder="请选择完成动作"
                  >
                    <el-option
                      v-for="item in finishActionOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
              </div>
            </div>
          </div>
        </div>    
      </div>
    </div>

    <!-- 收起按钮 -->
    <div class="fold-btn" @click="toggleCollapse">
      <img class="fold-btn-bg" :src="foldBg" alt="左收起背景" />
      <img class="fold-btn-to-left-icon" :class="{ rotated: isCollapsed }" :src="foldIconToLeft" alt="向左收起" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CommonSlider from '@/components/CommonSlider.vue'

// 头部icon
import saveIcon from '@/assets/icons/icon_save.png' // 保存icon
import goBackIcon from '@/assets/icons/icon_go_back.png' // 返回icon

// 收起icon
import foldBg from '@/assets/icons/icon_fold_left_bg.png' // 收起按钮的背景
import foldIconToLeft from '@/assets/icons/icon_fold_to_left_arrow.png' // 向左icon

// 航线类型icon
import waypointRouteIcon from '@/assets/icons/icon_waypoint_route.png' // 航点航线icon
import areaRouteIcon from '@/assets/icons/icon_area_route.png' // 面状航线icon

// 控制面板折叠状态
const isCollapsed = ref(false)

// 切换折叠状态
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
}

// 拍照设置icon
import wideAngleIcon from '@/assets/icons/icon_wide_angle.png' // 广角icon
import zoomIcon from '@/assets/icons/icon_zoom.png' // 变焦icon
import infraredIcon from '@/assets/icons/icon_infrared.png' // 红外icon

// 设置起飞点icon
import questionIcon from '@/assets/icons/icon_question.png' // 问号icon
import setTakeoffPointIcon from '@/assets/icons/icon_set_takeoff_point.png' // 设置起飞点icon

// 起飞爬升模式icon
import verticalClimbIcon from '@/assets/icons/icon_vertical_climb.png' // 垂直爬升icon
import tiltClimbIcon from '@/assets/icons/icon_tilt_climb.png' // 倾斜爬升icon

// 起飞爬升模式图片
import takeoffClimbModeImg from '@/assets/images/takeoff_climb_mode_img.png' // 爬升示例图片

// 航线高度模式icon
import absoluteAltitudeIcon from '@/assets/icons/icon_absolute_altitude.png' // 绝对高度icon
import relativeTakeoffAltitudeIcon from '@/assets/icons/icon_relative_takeoff_altitude.png' // 相对起飞点高度icon

// 航线高度模式图片
import airlineAltitudeModeImg from '@/assets/images/airline_altitude_mode_img.png' // 航线高度模式示例图片

// 当前选中的航线类型
const selectedAirlineType = ref('waypoint') // 默认选中航点航线

// 选择航线类型
const selectAirlineType = (type) => {
  selectedAirlineType.value = type
}

// 当前选中的拍照设置
const selectedPhotoSetting = ref('wideAngle') // 默认选中广角

// 选择拍照设置
const selectPhotoSetting = (setting) => {
  selectedPhotoSetting.value = setting
}

// 航线名称
const airlineName = ref('')

// 选中的设备
const selectedDevice = ref('') // 设备型号
const selectedDeviceSerial = ref('') // 设备序列号

// 模拟设备数据
const deviceOptions = ref([
  { value: 'dji-mini3', label: 'DJI Mini 3' },
  { value: 'dji-mavic3', label: 'DJI Mavic 3' },
  { value: 'dji-phantom4', label: 'DJI Phantom 4' },
  { value: 'dji-inspire2', label: 'DJI Inspire 2' }
])

// 模拟设备序列号数据
const deviceSerialOptions = ref([
  { value: 'SN001', label: 'SN001' },
  { value: 'SN002', label: 'SN002' },
  { value: 'SN003', label: 'SN003' },
  { value: 'SN004', label: 'SN004' }
])

// 当前高度
const currentAltitude = ref(180)

// 调整高度
const adjustAltitude = (value) => {
  currentAltitude.value += value
  // 限制最小值为0
  if (currentAltitude.value < 0) {
    currentAltitude.value = 0
  }
}

// 当前选中的起飞爬升模式
const selectedClimbMode = ref('vertical') // 默认选中垂直爬升

// 选择起飞爬升模式
const selectClimbMode = (mode) => {
  selectedClimbMode.value = mode
}

// 当前选中的航线高度模式
const selectedAltitudeMode = ref('absolute') // 默认选中绝对高度

// 选择航线高度模式
const selectAltitudeMode = (mode) => {
  selectedAltitudeMode.value = mode
}

// 航线高度
const airlineAltitude = ref(120)

// 调整航线高度
const adjustAirlineAltitude = (value) => {
  airlineAltitude.value += value
  // 限制最小值为0
  if (airlineAltitude.value < 0) {
    airlineAltitude.value = 0
  }
}

// 全局航线速度
const globalAirlineSpeed = ref(10)

// 高级设置
// 航点类型
const waypointType = ref('') // 航点类型选中值
const waypointTypeOptions = ref([
  { value: 'hover', label: '悬停' },
  { value: 'pass', label: '飞越' },
  { value: 'coordinate', label: '协调转弯' }
])

// 飞行器偏航角模式
const yawMode = ref('') // 偏航角模式选中值
const yawModeOptions = ref([
  { value: 'auto', label: '自动(沿航线方向)' },
  { value: 'manual', label: '手动控制' },
  { value: 'fixed', label: '固定角度' }
])

// 航点间云台俯仰角控制模式
const gimbalPitchMode = ref('') // 云台俯仰角模式选中值
const gimbalPitchModeOptions = ref([
  { value: 'focus', label: '兴趣点跟随' },
  { value: 'manual', label: '手动控制' },
  { value: 'interpolate', label: '平滑过渡' }
])

// 完成动作
const finishAction = ref('') // 完成动作选中值
const finishActionOptions = ref([
  { value: 'hover', label: '悬停' },
  { value: 'return', label: '返航' },
  { value: 'land', label: '原地降落' }
])
</script>

<style lang="scss" scoped>
@import '@/style/element-overrides.scss';
@import '@/style/utils.scss';

.edit-airline-panel {
  position: relative;
  width: 510px;
  height: 903px;
  background: url('@/assets/images/edit_airline_bg.png') no-repeat center center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  transition: transform 0.3s ease, width 0.3s ease;
  
  // 折叠状态
  &.collapsed {
    transform: translateX(-541px); // 只露出收起按钮部分
    
    .panel-header,
    .panel-content {
      opacity: 0;
      pointer-events: none;
    }
  }
  
  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    transition: opacity 0.3s ease;
    
    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      background: linear-gradient(180deg, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 40%, rgba(59, 135, 202, 1) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
    }

    // 功能按钮组
    .function-btn-group {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      .function-btn-item {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        cursor: pointer;
        & + .function-btn-item {
          margin-left: 25px;
        }
        .function-btn-icon {
          width: auto;
          height: 13px;
          &.refresh {
            width: auto;
            height: 17px;
            position: relative;
            top: -1px;
          }
        }
        .function-btn-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 22px;
          color: rgba(175, 215, 230, 1);
          margin-left: 6px;
        }
      }
    }
  }
  
  .panel-content {
    flex: 1;
    width: 100%;
    max-height: 865px;
    overflow-y: auto;
    padding: 30px 16px;
    transition: opacity 0.3s ease;
    
    // 滚动条样式
    &::-webkit-scrollbar {
      width: 5px;
    }
    
    &::-webkit-scrollbar-track {
      background: transparent;
      border-radius: 2.5px;
    }
    
    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 2.5px;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(255, 255, 255, 0.5);
      }
    }
    
    // Firefox 滚动条样式
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    // 背景卡片
    .bg-card {
      background: rgba(2, 92, 109, 0.3);
      backdrop-filter: blur(6px);
      padding: 16px;
      box-sizing: border-box;
      & + .bg-card {
        margin-top: 8px;
      }
      &.normal-card {
        .card-row {
          display: flex;
          flex-flow: row nowrap;
          justify-content: flex-start;
          align-items: center;
          & + .card-row {
            margin-top: 8px;
          }
        }
        .card-label {
          min-width: 131px;
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 0.7);
          &.move-up-label {
            position: relative;
            top: -3px;
          }
          .question-icon {
            width: 12px;
            height: 12px;
            margin-left: 5px;
            position: relative;
            bottom: -1px;
            cursor: pointer;
          }
        }
        .card-content {
          flex: 1;
        }
      }
    }
    // 航线基本信息
    .airline-base-info-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      .base-info-item {
        flex: 1;
        .base-info-item-label {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 0.7);
          margin-bottom: 6px;
          text-align: center;
        }
        .base-info-item-content {
          font-size: 14px;
          font-weight: 900;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          .unit {
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0px;
            line-height: 12px;
            color: rgba(255, 255, 255, 0.7);
            padding-left: 2px;
          }
        }
      }
    }
    // 航线类型
    .airline-type-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      .airline-type-item {
        width: 153px;
        height: 32px;
        border-radius: 4px;
        border: 2px solid rgba(20, 109, 142, 1);
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: rgba(25, 167, 181, 0.8);
        }
        
        &.active {
          background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
          border-color: rgba(25, 167, 181, 1);
        }
        
        & + .airline-type-item {
          margin-left: 9px;
        }
        
        .airline-type-item-icon {
          width: auto;
          height: 14px;
          margin-right: 10px;
        }
        .airline-type-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    // 航线名称、设备选择
    .airline-name-content-wrapper {
      width: 315px;
    }
    .select-device-content-wrapper {
      width: 315px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      :deep(.el-select) {
        width: 153px;
        & + .el-select {
          margin-left: 8px;
        }
      }
    }
    // 全局航线速度
    .global-speed-input-wrapper {
      width: 120px;
      
      // 隐藏数字输入框的上下箭头
      :deep(.el-input__inner) {
        &::-webkit-inner-spin-button,
        &::-webkit-outer-spin-button {
          -webkit-appearance: none;
          appearance: none;
          margin: 0;
        }
        &[type=number] {
          -moz-appearance: textfield;
          appearance: textfield;
        }
      }
    }
    // 拍照设置
    .photo-settings-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      .photo-settings-item {
        width: 99px;
        height: 32px;
        border-radius: 4px;
        border: 2px solid rgba(20, 109, 142, 1);
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: rgba(25, 167, 181, 0.8);
        }
        
        &.active {
          background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
          border-color: rgba(25, 167, 181, 1);
        }
        
        & + .photo-settings-item {
          margin-left: 9px;
        }
        
        .photo-settings-item-icon {
          width: auto;
          height: 14px;
          margin-right: 10px;
        }
        .photo-settings-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    // 设置起飞点
    .set-takeoff-point-container {
      width: 100%;
      height: 100%;
      // 按钮
      .set-takeoff-point-item {
        width: 315px;
        height: 32px;
        border-radius: 4px;
        background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
        border: 2px solid rgba(20, 109, 142, 1);
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        margin-bottom: 10px;
        .set-takeoff-point-item-icon {
          width: auto;
          height: 14px;
          margin-right: 10px;
        }
        .set-takeoff-point-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
      // 经纬度信息
      .lon-and-lat-info {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        .info-item {
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 12px;
          color: rgba(255, 255, 255, 0.7);
          & + .info-item {
            margin-left: 24px;
          }
        }
      }
    }
    // 起飞爬升模式
    .takeoff-climb-mode-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      .takeoff-climb-mode-item {
        width: 105px;
        height: 32px;
        border-radius: 4px;
        border: 2px solid rgba(20, 109, 142, 1);
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: rgba(25, 167, 181, 0.8);
        }
        
        &.active {
          background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
          border-color: rgba(25, 167, 181, 1);
        }
        
        & + .takeoff-climb-mode-item {
          margin-left: 8px;
        }
        
        .takeoff-climb-mode-item-icon {
          width: auto;
          height: 14px;
          margin-right: 10px;
        }
        .takeoff-climb-mode-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    // 起飞爬升模式-设置
    .takeoff-climb-mode-setting-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      .img-wrapper {
        width: 222px;
        .img-item {
          width: 100%;
          height: auto;
        }
      }
      .content-wrapper {
        flex: 1;
        padding-right: 30px;
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 8px;
        
        // 高度控制项通用样式
        .altitude-control-item {
          width: 90px;
          height: 32px;
          border: 1px solid rgba(175, 215, 230, 0.5);
          border-radius: 2px;
          background: transparent;
          display: flex;
          align-items: center;
          transition: all 0.3s;
          box-shadow: none;
          
          // 可点击的按钮样式
          &.clickable {
            cursor: pointer;
            
            &:hover {
              border-color: rgba(0, 255, 244, 0.5);
              background: rgba(0, 255, 244, 0.05);
            }
            
            &:active {
              background: rgba(0, 255, 244, 0.1);
            }
          }
          
          // 控制值
          .control-value {
            flex: 1;
            text-align: center;
            font-size: 14px;
            // color: rgba(255, 255, 255, 1);
            color: rgba(0, 255, 244, 1);
            font-weight: 500;
          }
          
          // 单位
          .control-unit {
            padding: 0 10px;
            font-size: 14px;
            color: rgba(0, 255, 244, 1);
            border-left: 1px solid rgba(175, 215, 230, 0.5);
            height: 30px;
            line-height: 30px;
          }
        }
        
        // 高度输入框容器
        .altitude-input-wrapper {
          width: 90px;
          
          // 隐藏数字输入框的上下箭头
          :deep(.el-input__inner) {
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
              -webkit-appearance: none;
              appearance: none;
              margin: 0;
            }
            &[type=number] {
              -moz-appearance: textfield;
              appearance: textfield;
            }
          }
        }
      }
    }
    // 航线高度模式
    .airline-altitude-mode-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      .airline-altitude-mode-item {
        width: 104px;
        height: 32px;
        border-radius: 4px;
        border: 2px solid rgba(20, 109, 142, 1);
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: all 0.3s ease;
        
        // 相对起飞点高度按钮宽度特殊处理
        &.relative {
          width: 146px;
        }
        
        &:hover {
          border-color: rgba(25, 167, 181, 0.8);
        }
        
        &.active {
          background: linear-gradient(180deg, rgba(25, 167, 181, 1) 0%, rgba(2, 48, 60, 1) 53.09%, rgba(25, 167, 181, 1) 100%);
          border-color: rgba(25, 167, 181, 1);
        }
        
        & + .airline-altitude-mode-item {
          margin-left: 8px;
        }
        
        .airline-altitude-mode-item-icon {
          width: auto;
          height: 14px;
          margin-right: 10px;
        }
        .airline-altitude-mode-item-text {
          font-size: 14px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 14px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    // 航线高度模式-设置
    .airline-altitude-mode-setting-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
      .img-wrapper {
        width: 234px;
        .img-item {
          width: 100%;
          height: auto;
        }
      }
      .content-wrapper {
        flex: 1;
        padding-right: 30px;
        box-sizing: border-box;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        align-items: flex-end;
        gap: 8px;
        
        // 航线高度控制项样式
        .airline-altitude-control-item {
          width: 90px;
          height: 32px;
          border: 1px solid rgba(175, 215, 230, 0.5);
          border-radius: 2px;
          background: transparent;
          display: flex;
          align-items: center;
          transition: all 0.3s;
          box-shadow: none;
          
          // 可点击的按钮样式
          &.clickable {
            cursor: pointer;
            
            &:hover {
              border-color: rgba(0, 255, 244, 0.5);
              background: rgba(0, 255, 244, 0.05);
            }
            
            &:active {
              background: rgba(0, 255, 244, 0.1);
            }
          }
          
          // 控制值
          .control-value {
            flex: 1;
            text-align: center;
            font-size: 14px;
            // color: rgba(255, 255, 255, 1);
            color: rgba(0, 255, 244, 1);
            font-weight: 500;
          }
          
          // 单位
          .control-unit {
            padding: 0 10px;
            font-size: 14px;
            color: rgba(0, 255, 244, 1);
            border-left: 1px solid rgba(175, 215, 230, 0.5);
            height: 30px;
            line-height: 30px;
          }
        }
        
        // 航线高度输入框容器
        .airline-altitude-input-wrapper {
          width: 90px;
          
          // 隐藏数字输入框的上下箭头
          :deep(.el-input__inner) {
            &::-webkit-inner-spin-button,
            &::-webkit-outer-spin-button {
              -webkit-appearance: none;
              appearance: none;
              margin: 0;
            }
            &[type=number] {
              -moz-appearance: textfield;
              appearance: textfield;
            }
          }
        }
      }
    }
    // 全局航线速度
    .global-speed-content-container {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
    }
    // 航线速度设置
    .airline-speed-setting-container {
      padding: 0;
      margin-top: 19px;
    }
    // 高级设置
    .advanced-setting-container {
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: stretch; // 确保子元素拉伸
      
      .card-row {
        width: 100%;
        min-height: 32px; // 设置最小高度
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: center;
        
        // 确保第一行（标题行）也有相同高度
        &:first-child {
          min-height: 32px;
        }
        
        & + .card-row {
          margin-top: 8px;
        }
      }
    }
    .advanced-setting-content-wrapper {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
    }
    .advanced-setting-select-wrapper {
      width: 223px;
    }
  }

  // 收起按钮
  .fold-btn {
    position: absolute;
    top: 50%;
    right: -26px;
    z-index: 2;
    transform: translateY(-50%);
    width: 26px;
    height: 81px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      .fold-btn-to-left-icon {
        transform: translate(-50%, -50%) scale(1.2);
        
        &.rotated {
          transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
        }
      }
    }
    .fold-btn-bg {
      width: 100%;
      height: 100%;
    }
    .fold-btn-to-left-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
      
      // 折叠状态时旋转180度
      &.rotated {
        transform: translate(-50%, -50%) rotate(180deg);
      }
    }
  }
}
</style>
